import { List, Calendar } from 'antd-mobile';
import zhCN from 'antd-mobile/lib/calendar/locale/zh_CN';
import React, { Component } from 'react'
// import './time.css'

const extra = {
  '2017/07/15': { disable: false },
};

const now = new Date();

extra[+new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1)] = { disable: true };
extra[+new Date(now.getFullYear(), now.getMonth(), now.getDate() - 2)] = { disable: true };
extra[+new Date(now.getFullYear(), now.getMonth(), now.getDate() - 3)] = { disable: true };
extra[+new Date(now.getFullYear(), now.getMonth(), now.getDate() - 4)] = { disable: true };
extra[+new Date(now.getFullYear(), now.getMonth(), now.getDate() - 5)] = { disable: true };
extra[+new Date(now.getFullYear(), now.getMonth(), now.getDate() - 6)] = { disable: true };

Object.keys(extra).forEach((key) => {

  const info = extra[key];
  const date = new Date(key);
  if (!Number.isNaN(+date) && !extra[+date]) {
    extra[+date] = info;
  }
});

const styem = {
  fontSize: '0.16rem',
  color: '#333',
}

const styspan = {
  fontSize: '0.16rem',
  color: '#308BFE',
}

const stycon = {
  height: '0.41rem',
  lineHeight: '0.41rem',
  display: 'flex',
  justifyContent: 'space-between',
  verticalAlign: 'middle'
}

class Timeshow extends Component {
  originbodyScrollY = document.getElementsByTagName('body')[0].style.overflowY;

  constructor(props) {
    super(props);
    this.state = {
      show: false,
      config: {},
      time: this.getTime(new Date())
    };
  }

  renderBtn(zh, t, config = {}) {
    config.locale = zhCN;
    return (
      <List.Item arrow="horizontal"
        onClick={() => {
          document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
          this.setState({
            show: true,
            config,
          });
        }}
      >
        {
          <div style={stycon}>
            <em style={styem}>{zh}</em><span style={styspan}>{t}</span>
          </div>
        }
      </List.Item>
    );
  }

  getTime(starttime) {
    let today = new Date().getTime()
    let d = new Date(starttime);
    let month = d.getMonth() + 1;
    let date = d.getDate();
    let week = this.numOfchinese(d.getDay());
    let hour = this.doubleNumer(d.getHours());
    let min = this.doubleNumer(d.getMinutes());
    let defua = '今天' + hour + ":" + min + '(星期' + week + ')'
    let str = month + "月" + date + "日" + hour + ":" + min + '(星期' + week + ')'

    if (starttime.getTime() === today) {
      return defua
    } else {
      return str
    }
  }

  doubleNumer(n) {
    if (n < 10) {
      return "0" + n;
    } else {
      return n;
    }
  }

  numOfchinese(num) {
    var arr = ["日", "一", "二", "三", "四", "五", "六"];
    return arr[num];
  }

  onConfirm = (startTime, endTime) => {
    this.setState({
      time: this.getTime(startTime)
    })
    document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
    this.setState({
      show: false,
      startTime,
      endTime,
    });
  }


  onCancel = () => {
    document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
    this.setState({
      show: false,
      startTime: undefined,
      endTime: undefined,
    });
  }

  getDateExtra = date => extra[+date];


  render() {
    let { time } = this.state
    return (

      <div>
        <List className="calendar-list" style={{ backgroundColor: 'white', height: '0.55rem' }}>
          {this.renderBtn('截止日期：', time, { type: 'one', pickTime: true })}
        </List>
        <Calendar
          {...this.state.config}
          visible={this.state.show}
          onCancel={this.onCancel}
          onConfirm={this.onConfirm}
          getDateExtra={this.getDateExtra}
          defaultDate={now}
        />
      </div>
    );
  }
}

export default Timeshow